<template>
  <base-popup ref="popupRef" round mode="bottom" :closeable="false">
    <view class="base-picker">
      <nut-picker
        v-model="val"
        :columns="props.columns"
        :title="props.title"
        :field-names="props.fieldNames"
        @confirm="confirm"
        @cancel="cancel"
      />
    </view>
  </base-popup>
</template>

<script setup>
import BasePopup from "@/components/base-popup/uv-popup.vue";

const emits = defineEmits(["confirm"]);
const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
    default: "",
  },
  fieldNames: {
    type: Object,
    default: () => {
      return {
        text: "text",
        value: "value",
        children: "children",
      };
    },
  },
});

const popupRef = ref(null);
const val = ref([]);

const confirm = (e) => {
  emits("confirm", e);
  cancel();
};

const cancel = () => {
  popupRef.value.close();
};

const open = () => {
  popupRef.value.open();
};

defineExpose({
  open,
});
</script>

<style lang="scss">
.base-picker {
  width: 100vw;
  min-height: 400px;
  max-height: 80vh;
  overflow: auto;
}
</style>
